<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <style type="text/css">
        table {
            font-size: 14px;
            color: #606266;
        }
    </style>

</head>
<body>


<div id="datagrid_grid1">
    <template>
        <div style="margin-bottom: 10px">
            <el-form :label-position="labelPosition" class="demo-ruleForm" label-width="100px" :model="grid1" ref="grid1" @submit.native.prevent>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="First name:" prop="firstName">
                            <el-input v-model="grid1.firstName" placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Last name:" prop="lastName">
                            <el-input v-model="grid1.lastName" placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Age:" prop="age">
                            <el-input v-model="grid1.age" placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="area:" prop="area">
                            <el-select v-model="grid1.area" placeholder=""
                                       multiple
                                       filterable>
                                <el-option label="北京123" value="1"></el-option>
                                <el-option label="上海123" value="2"></el-option>
                                <el-option label="广州123" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="日期:" prop="date">
                            <el-date-picker v-model="grid1.date" type="date" placeholder="请选择日期1">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="日期时间:" prop="datetime">
                            <el-date-picker v-model="grid1.datetime" type="datetime" placeholder="请选择日期时间1">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="日期时间:" prop="datetime2">
                            <el-date-picker v-model="grid1.datetime2" type="datetime" placeholder="请选择日期时间1">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div style="margin-top:10px">
                <el-button type="primary" @click="v_submitForm" >Submit</el-button>
                <el-button  @click="v_resetForm" >reset</el-button>
            </div>
        </div>

        <el-table :data="grid1tableData" stripe border
                  style="width: 100%"
        >
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名字"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
            >
            </el-table-column>
        </el-table>

        <div style="margin-top: 10px">
            <el-pagination
                    background
                    @size-change="grid1PageSizeChange"
                    @current-change="grid1PageCurrentChange"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalRecords">
            </el-pagination>
        </div>

    </template>
</div>

<script type="text/javascript">
    var grid1Data = {
        data() {
            return {
                labelPosition: 'right',
                totalRecords: 0,
                pageNum: 1,
                pageSize: 20,
                grid1tableData: [],
                grid1: {
                    firstName: ''
                    ,
                    lastName: ''
                    ,
                    age: ''
                    ,
                    area: ''
                    ,
                    date: ''
                    ,
                    datetime: ''
                    ,
                    datetime2: ''
                }
            }
        },
        methods: {
            grid1PageSizeChange: function(val) {
                console.log('每页 ' + val + ' 条');
                this.pageSize = val;
                this.grid1ReloadTable();
            },

            grid1PageCurrentChange: function(val) {
                console.log('当前页: ' + val);
                this.pageNum = val;
                this.grid1ReloadTable();
            },

            grid1ReloadTable: function () {
                let param = Object.assign(this.grid1, {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum
                });
                console.log(param);

                if (this.grid1tableData.length == 0) {
                    this.grid1tableData = [
                        {
                            date: '2016-01-01'
                            ,
                            name: '张三'
                            ,
                            address: '北京'

                        }
                        ,
                        {
                            date: '2016-01-02'
                            ,
                            name: '张三1'
                            ,
                            address: '北京1'

                        }
                        ,
                        {
                            date: '2016-01-03'
                            ,
                            name: '张三2'
                            ,
                            address: '北京2'

                        }
                        ,
                        {
                            date: '2016-01-04'
                            ,
                            name: '张三3'
                            ,
                            address: '北京3'

                        }
                        ,
                        {
                            date: '2016-01-05'
                            ,
                            name: '张三4'
                            ,
                            address: '北京4'

                        }
                        ,
                        {
                            date: '2016-01-06'
                            ,
                            name: '张三5'
                            ,
                            address: '北京5'

                        }

                    ];
                } else {
                    this.grid1tableData.push({
                        name: "李四" + this.totalRecords,
                        address:"南京" + this.totalRecords,
                        date: "2019-40-" + this.totalRecords

                    });
                }

                this.totalRecords = this.grid1tableData.length * 10;
            }

            ,
            v_submitForm: function() {
                submitForm();
            }
            ,
            v_resetForm: function() {
                resetForm();
            }
        }
    };

    var grid1Grid = Vue.extend(grid1Data);
    var grid1GridInstance = new grid1Grid();
    grid1GridInstance.$mount('#datagrid_grid1');
    grid1GridInstance.grid1ReloadTable();

</script>


</body>



</html>